<template>
  <div @resize="handleResize">
	<div class="data_title">数据详情</div>
    <Row :gutter="24" style="margin-top: 20px;">
      <Col san="24" class="ivu-mb">
        <Card :bordered="false" dis-hover class="dashboard-console-visit">
          <div slot="title">
            <Row type="flex" justify="center" align="middle">
              <Col span="8">
                <Avatar icon="ios-podium" size="small" style="color: #1890ff; background-color: #e6f7ff" />
                <span class="ivu-pl-8">趋势</span>
              </Col>
              <Col span="16" class="ivu-text-right">
                <RadioGroup v-model="visitDate" type="button" class="ivu-mr-8" @on-change="handleChangeVisitType">
                  <Radio label="week">周</Radio>
                  <Radio label="month">月</Radio>
                  <Radio label="year">年</Radio>
                </RadioGroup>
              </Col>
            </Row>
          </div>
          <div class="content">
			  <div class="total_content">
				  <div class="section">
					  <span class="text">本周动态总数</span>
					  <span class="value">{{tadata.post_week_total}}</span>
					  <span class="percent">
						  <span class="blue" v-if="tadata.post_week_tb_per_type == 0">▲<span class="blue-tex">{{tadata.post_week_tb_per}}%</span></span>
						  <span class="red" v-else>▼<span class="red-tex">{{tadata.post_week_tb_per}}%</span></span>
						  <span>同比上周</span>
					  </span>
				  </div>
				  <div class="section">
					  <span class="text">本周注册用户总数</span>
					  <span class="value">{{tadata.reg_user_week_total}}</span>
					  <span class="percent">
						  <span class="blue" v-if="tadata.reg_user_tb_per_type == 0">▲<span class="blue-tex">{{tadata.reg_user_tb_per}}%</span></span>
						  <span class="red" v-else>▼<span class="red-tex">{{tadata.reg_user_tb_per}}%</span></span>
						  <span>同比上周</span>
					 </span>
				  </div>
				  <div class="section">
					  <span class="text">本周建档用户总数</span>
					  <span class="value">{{tadata.arc_user_week_total}}</span>
					  <span class="percent">
						  <span class="blue" v-if="tadata.arc_user_tb_per_type == 0">▲<span class="blue-tex">{{tadata.arc_user_tb_per}}%</span></span>
						  <span class="red" v-else>▼<span class="red-tex">{{tadata.arc_user_tb_per}}%</span></span>
						  <span>同比上周</span>
					</span>
				  </div>
			  </div><!--total_content end-->
			  <div class="graid">
				  <echarts-from
				    ref="visitChart"
				    :series="series"
				    :infoList="infoList"
				    v-if="infoList"
				    :yAxisData="yAxisData"
				  ></echarts-from>
			  </div>
		  </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { orderApi,indexTotaltbApi } from '@/api/index';
import echartsFrom from '@/components/echarts/index';
export default {
  components: { echartsFrom },
  data() {
    return {
      infoList: null,
      // visitDate: 'thirtyday',
      visitDate: 'week',
      series: [],
      yAxisData: [],
	  tadata:{}
    };
  },
  methods: {
    // 统计
    getStatistics() {
      let data = {
        cycle: this.visitDate,
      };
      orderApi(data)
        .then(async (res) => {
          this.infoList = res.data || {};
          (this.series = this.infoList.series || []),
            (this.yAxisData = [
              {
                type: 'value',
                name: '',
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#7F8B9C',
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#F5F7F9',
                  },
                },
              },
              {
                type: 'value',
                name: '',
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#F537F9',
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#F537F9',
                  },
                },
                // axisLabel: {
                //     formatter: '{value} °C'
                // }
              },
            ]);
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
	// 统计
	getTb() {
	  indexTotaltbApi()
	    .then(async (res) => {
			this.tadata = res.data;
	    })
	    .catch((res) => {
	      this.$Message.error(res.msg);
	    });
	},
    // 时间改变
    handleChangeVisitType() {
      this.getStatistics();
    },
    // 监听页面宽度变化，刷新表格
    handleResize() {
      if (this.infoList) this.$refs.visitChart.handleResize();
    },
  },
  created() {
    this.getStatistics();
	this.getTb();
  },
};
</script>
<style lang="less" scoped>
.dashboard-console-visit {
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}
.ivu-text-right {
  text-align: right;
}
.ivu-pl-8 {
  padding-left: 8px !important;
}
.data_title{
	font-size: 18px;
	font-weight: bold;
	color: black;
}
.content{
	display: flex;
	flex-direction: row;
	.total_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		// align-items: center;
		width: 145px;
		border-right: 1px solid #f1f1f1;
		padding-bottom: 30px;
		padding-left: 15px;
		.section{
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 20px;
			.text{
				font-size: 12px;
				color: darkgray;
			}
			.value{
				font-size: 24px;
				color: dimgray;
				font-weight: bold;
			}
			.percent{
				font-size: 12px;
				color: darkgray;
				font-weight: bold;
				.blue{
					color: green;
					font-size: 8px;
				}
				.blue-tex{
					color: green;
					font-size: 12px;
				}
				.red{
					color: red;
					font-size: 8px;
				}
				.red-tex{
					color: red;
					font-size: 12px;
				}
			}
		}
	}
	.graid{
		margin-left: 30px;
		flex:1;
	}
}
</style>
